<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>购物车-英雄联盟周边商城</title>
    <link rel="stylesheet" href="../static/css/swb.css"/>
    <link rel="stylesheet" href="../static/css/public.css"/>
    <link rel="stylesheet" href="../static/css/Shopping.css"/>
</head>
<body>
<header sty="hi75">
    <div class="banner cf">
        <div sty="mt17" class="logo-box ftl">
            <a sty="wi297 hi39" class="logo dpib" href=""></a>
        </div>
        <div sty="hi30 mt22" class="header-right-box ftr fdl">
            {% if user.is_authenticated %}
                <div sty="mt8 mr10" class="login_btn fl">
                    欢迎您：<em>{{ user.username }}</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
            {% else %}
                <div sty="pr20 cf">
                    <a sty="pr6 lh30" href="{{ url('users:login') }}">您好，请登录 </a>
                </div>
            {% endif %}
            <div sty="pr28 cf">
                <a href="{{ url('users:Shopping') }}">
                    <i sty="wi28 hi25 mt3 mr4" class="shop ftl"></i>
                    <span sty="lh30 pr6" class="ftl">购物车</span>
                    <span sty="wi20 hi20 lh20 mt7 " class="shop-num ftl tac">0</span>
                </a>
            </div>
            <div sty="pr28 cf">
                <i sty="wi24 hi26 mt3 mr4" class="service ftl"></i>
                <span sty="lh30" class="ftl">客服咨询</span>
            </div>
            <div sty="cf">
                <i sty="wi20 hi20 mt5 mr4" class="qr-code ftl"></i>
                <span sty="lh30" class="ftl">微信商城</span>
            </div>
        </div>
    </div>
</header>

<div sty="mb50 pt20" class="main">
    <div class="banner fdl">
        <div sty="wi850" class="main-left">
            <div sty="lh50" class="shop-header fdl">
                <div sty="mr20 pl10 pr12" class="available fdl">
                    <div>
                            <input type="checkbox" checked onclick="on_selected_all(this)" sty="wi16 hi16 mt30 mr8">
                    </div>
                    <div sty="lh50 wi24"><span>全选</span></div>
                </div>
                <div sty="wi260 lh50">商品名称</div>
                <div sty="wi125 lh50" class="tac">单价(元)</div>
                <div sty="wi125 lh50" class="tac">数量</div>
                <div sty="wi125 lh50" class="tac">小计</div>
                <div sty="wi125 lh50" class="tac">操作</div>
            </div>
            {% for cart_sku in cart_skus %}
                <div class="shopList">
                    <div sty="pt20 pb20" class="shopList-item fdl">
                        <div sty="wi50 pl30 pr10" class="available fdl">
                            <div>
                                {% if cart_sku.selected %}
                                    <input type="checkbox" checked onclick="on_selected(this)" id="{{ cart_sku.id }}"
                                           sty="wi16 hi16 mt30 mr8">
                                {% else %}
                                    <input type="checkbox" onclick="on_selected(this)" id="{{ cart_sku.id }}"
                                           sty="wi16 hi16 mt30 mr8">
                                {% endif %}
                                <input type="hidden" value="{{ cart_sku.number }}">
                            </div>
                        </div>
                        <div sty="wi260 lh80" class="fdl">
                            <div sty="wi80 hi80 mr15" class="shopList-img">
                                <img src="{{ cart_sku.front_image }}" alt=""/>
                            </div>

                            <div class="shopList-content">
                                <div sty="lh24 fs14">{{ cart_sku.name }}</div>
                            </div>
                        </div>
                        <div sty="wi125 lh80" id="now_price" class="tac"><span>￥{{ cart_sku.now_price }}</span>元</div>
                        <div sty="wi125 lh80" class="tac">
                            <div sty="ml20 mt20" class="stepper ftl cf">
                                <span sty="wi25" onclick="on_jian(this)" class="stepper-left">-</span>
                                <input
                                        id="number"
                                        sty="wi40 hi35"
                                        class="stepper-num ftl tac"
                                        type="text"
                                        value="{{ cart_sku.number }}"
                                />
                                <input type="hidden" value="{{ cart_sku.id }}">
                                <span sty="wi25" onclick="on_jia(this)" class="stepper-right">+</span>
                            </div>
                        </div>
                        <div sty="wi125 lh80" class="tac"><span>￥{{ cart_sku.amount }}</span>元</div>
                        <div sty="wi125 lh80" class="tac">
                            <a sty="mr10" onclick="on_delete(this)" sku_id="{{ cart_sku.id }}" class="dpib">删除</a>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
            <div class="shop-footer shopList-item">
                <div sty="mr20 pl10 pr12" class="available fdl">
                    <div>
                        <input type="checkbox" checked onclick="on_selected_all(this)" sty="wi16 hi16 mt30 mr8">
                    </div>
                    <div sty="lh50">
                        <span sty="mr20px">全选</span>
                        <a
                                href="javascript:;"
                                onclick="window.history.go(-1);"
                                style="color:red;"
                        >继续购物</a
                        >
                    </div>
                    <div class="ftr">
                        <a sty="dpib lh50 pl15 ml20" id="del-btn" href="javascript:;"
                        >清空购物车</a
                        >
                    </div>
                </div>
            </div>
            <div class="recommend">
                <div sty="lh44 pl12 fs14 mt40" class="recommend-title">
                    精品推荐
                </div>
                <div sty="pt12" class="recommend-content">
                    <ul class="flex">
                        <li sty="wi128" class="tac">
                            <a class="recommend-content-img" href="">
                                <div>
                                    <img src="../static/images/20181105200122_91160.jpg" alt=""/>
                                </div>
                            </a>
                            <a sty="lh20 wi128" class="ccsl dpib" href=""
                            >英雄联盟funko手办-李青</a
                            >
                            <p style="color:red;">￥<span sty="fs14 lh24">88</span></p>
                            <a sty="lh22 wi80" href="" class="add-shop dpib tac"
                            >加入购物车</a
                            >
                        </li>
                        <li sty="wi128" class="tac">
                            <a class="recommend-content-img" href="">
                                <div>
                                    <img src="../static/images/20181105200122_91160.jpg" alt=""/>
                                </div>
                            </a>
                            <a sty="lh20 wi128" class="ccsl dpib" href=""
                            >英雄联盟funko手办-李青</a
                            >
                            <p style="color:red;">￥<span sty="fs14 lh24">88</span></p>
                            <a sty="lh22 wi80" href="" class="add-shop dpib tac"
                            >加入购物车</a
                            >
                        </li>
                        <li sty="wi128" class="tac">
                            <a class="recommend-content-img" href="">
                                <div>
                                    <img src="../static/images/20181105200122_91160.jpg" alt=""/>
                                </div>
                            </a>
                            <a sty="lh20 wi128" class="ccsl dpib" href=""
                            >英雄联盟funko手办-李青</a
                            >
                            <p style="color:red;">￥<span sty="fs14 lh24">88</span></p>
                            <a sty="lh22 wi80" href="" class="add-shop dpib tac"
                            >加入购物车</a
                            >
                        </li>
                        <li sty="wi128" class="tac">
                            <a class="recommend-content-img" href="">
                                <div>
                                    <img src="../static/images/20181105200122_91160.jpg" alt=""/>
                                </div>
                            </a>
                            <a sty="lh20 wi128" class="ccsl dpib" href=""
                            >英雄联盟funko手办-李青</a
                            >
                            <p style="color:red;">￥<span sty="fs14 lh24">88</span></p>
                            <a sty="lh22 wi80" href="" class="add-shop dpib tac"
                            >加入购物车</a
                            >
                        </li>
                        <li sty="wi128" class="tac">
                            <a class="recommend-content-img" href="">
                                <div>
                                    <img src="../static/images/20181105200122_91160.jpg" alt=""/>
                                </div>
                            </a>
                            <a sty="lh20 wi128" class="ccsl dpib" href=""
                            >英雄联盟funko手办-李青</a
                            >
                            <p style="color:red;">￥<span sty="fs14 lh24">88</span></p>
                            <a sty="lh22 wi80" href="" class="add-shop dpib tac"
                            >加入购物车</a
                            >
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div sty="wi300 pb4" class="main-right ftr">
            <div sty="lh42 pl35" class="main-right-header">我的购物车</div>
            <div sty="wi290 pr13 pl13" class="main-right-bg mat bsbb">
                <div sty="pt10 pb10" class="main-right-content1">
                    <span sty="lh26" style="color: red;">满199包邮</span>
                    <div sty="lh34 wi155" class="main-right-welfare">
                        <span sty="pl10" class="dpib fw7">已满足</span>
                        <span sty="pl20" class="dpib tdu">更多人气商品</span>
                    </div>
                </div>
                <div sty="pb10 pt10" class="main-right-content2">
                    <ul>
                        <li>商品数量：<span>2</span></li>
                        <li>商品金额：<span style="color: red;">￥300.00</span></li>
                    </ul>
                    <a
                            sty="lh46 mt10 fs18 wi264"
                            class="tac dpib"
                            href="{{ url('orders:place_order') }}"
                            style="background-color: #ed3029;color: #fff;"
                    >去结算</a
                    >
                </div>
                <div sty="pb10 pt10" class="main-right-content3 fdl">
                    <div sty="wi60 lh60" class="main-right-content2-left tac">
                        承诺
                    </div>
                    <div class="main-right-content3-right">
                        <ul>
                            <li>7天无理由退换货</li>
                            <li>100%官方正品</li>
                            <li>全场每单满199元包邮</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div sty="pt20 pb20" class="guarantee banner">
        <ul class="flex">
            <li>
                <i class="sales-return"></i>
                <span>7天无理由退换货</span>
            </li>
            <li>
                <i class="quality-goods"></i>
                <span>100%官方正品</span>
            </li>
            <li>
                <i class="pinkage"></i>
                <span>全场每单满199元包邮</span>
            </li>
        </ul>
    </div>
    <div class="issue">
        <div class="banner">
            <ul class="flex tac">
                <li>
                    <dl>
                        <dt>购物指南</dt>
                        <dd>帐号注册与登录</dd>
                        <dd>购买流程介绍</dd>
                        <dd>支付方式</dd>
                        <dd>常见问题</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>配送服务</dt>
                        <dd>全场满199元免运费</dd>
                        <dd>配送范围及运费</dd>
                        <dd>配送进度查询</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>售后服务</dt>
                        <dd>7天无理由退换货</dd>
                        <dd>退换货流程</dd>
                        <dd>商品送错的处理方案</dd>
                        <dd>售后服务及投诉</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>服务中心</dt>
                        <dd>售前咨询 售后咨询</dd>
                        <dd>客服热线：0755-25727866</dd>
                        <dd>售后：service@lolriotmall.qq.com</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div sty="lh40" class="copy tac">技术支持：全栈12 师文博</div>
</footer>
</body>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/swb.js"></script>
<script src="../static/js/public.js"></script>
</html>
